<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <School ref="sch"></School>
    </div>
</template>

<script>
    import School from "./components/School";

    export default {
        name: "app",
        components: {School},
        data() {
            return {
                msg: '欢迎学习VUE'
            }
        },
        methods: {
            showDOM(){
                // 真实的 DOM 元素
                console.log(this.$refs.title);
                // 真实的 DOM 元素
                console.log(this.$refs.btn);
                // School 组件的实例对象
                console.log(this.$refs.sch);
            }
        }
    }
</script>